<template>
	<view class="content">
		<el-container>
		  <el-header style="height: 10vh;">Header</el-header>
		  <el-container>
		    <el-aside width="180rpx">
				<ul>
					<li v-for="item in list" :key="item">
						<i class="el-icon-menu"></i>
						<text>{{item}}</text>
					</li>
				</ul>
			</el-aside>
		    <el-main>Main</el-main>
		  </el-container>
		</el-container>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				list:["小区","房产","费用","OA","停车","报修","巡检","采购","设备","办公","合同","保养","报表","优惠","预约"]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.el-header, .el-footer {
	    background-color: #B3C0D1;
	    color: #333;
	    text-align: center;
		height: 4vh;
	    line-height: 4vh;
	  }
	  
	  .el-aside {
	    background-color: #1f2339;
	    color: #333;
	    text-align: center;
		height: 90vh;
		width: 10vw;
		ul{
			li{
				// width: 10vw;
				height: 5.5vh;
				color: #838a9b;
				line-height: 5.5vh;
				font-size: 18rpx;
				text{
					margin-left: 6rpx;
				}
				&:hover{
					color: #fff;
					background-color: #3e77fc;
					cursor: pointer;
				}
			}

		}
	  }
	  
	  .el-main {
	    background-color: #E9EEF3;
	    color: #333;
	    text-align: center;
	    line-height: 160px;
	  }
	  
	  body > .el-container {
	    // margin-bottom: 40px;
		height: 100vh;
	  }
	  
	  .el-container:nth-child(5) .el-aside,
	  .el-container:nth-child(6) .el-aside {
	    line-height: 260px;
	  }
	  
	  .el-container:nth-child(7) .el-aside {
	    line-height: 320px;
	  }
</style>
